import getPageTitle from '@/utils/get-page-title'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import router, { asyncRouter } from './router'
import { getToken } from './utils/auth'
import { Message } from 'element-ui'
import store from './store'
import { constantRoutes } from './router'

NProgress.configure({ showSpinner: false }) // NProgress Configuration

const whiteList = ['/login']
// 前置路由守卫  登录权限
router.beforeEach(async(to, from, next) => {
  // start progress bar
  // 加载进度条
  NProgress.start()

  // set page title
  // 设置每个网页的头部信息
  document.title = getPageTitle(to.meta.title)

  if (getToken()) {
    to.path === '/login' ? next('/') : next()
    // 当vuex里面userInfo没有数据时候，就触发 getInfoAction 获取首页信息
    if (!store.getters.name) {
    // dispatch 触发 action  action 是异步的，需要等待action 执行
      await store.dispatch('user/getInfoAction')
      // 在导航守卫中， 获取vuex 中userInfo.roles.menus
      const menus = store.state.user.userInfo.roles.menus
      // 对比动态路由和 menus 中相同的路由 （改用户有权限的菜单）
      const permRoutes = asyncRouter.filter(item => {
        // 第一种写法
        return menus.includes(item.name)

        // 第二种写法
        // const name = item.path.slice(1)
        // if (menus.includes(item.name)) {
        // return true
        // }
      })
      // 把该用户有权限去的路由页面 保存到 vuex 中
      store.commit('user/saveRoutes', [...constantRoutes, ...permRoutes])

      console.log(store.state)
      // 通过 router.addRoutes 添加动态路由
      // 404必须放在最后，否则会阻止其它页面
      router.addRoutes([...permRoutes, { path: '*', redirect: '/404', hidden: true }])
    }

    // 关闭进度条
    NProgress.done()
    return
  }
  if (whiteList.includes(to.path)) {
    next()
    return
  }

  next('/login')
  Message.info('请重新登录')
})

router.afterEach(() => {
  // finish progress bar
  NProgress.done()
})
